import React, { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';
import ErrorBoundary from '@/components/error-boundary'; // 错误边界

const NoMatch = lazy(() => import('@/containers/no-match')); // 404页面
const App = lazy(() => import('@/containers/app'));
//
function Router() {
    return (
        <Routes>
            <Route
                path='/'
                element={
                    <Suspense fallback={<>...</>}>
                        <App />
                    </Suspense>
                }
                errorElement={<ErrorBoundary />}
            />
            <Route
                path='*'
                element={
                    <Suspense fallback={<>...</>}>
                        <NoMatch />
                    </Suspense>
                }
                errorElement={<ErrorBoundary />}
            />
        </Routes>
    );
}

export default Router;
